<style lang="scss" scoped>
.pingjia {
    .fenlei {
        padding: 15px;
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        margin-left: -8px;
        color: #676666;

        span {
            padding: 5px;
            font-size: 14px;
            background: #f1efef;
            margin: 4.8px;
        }

        div {
            padding: 5px;
            font-size: .89rem;
            background: #f1efef;
            margin: 4.8px;
        }
    }

    .userpingjia {
        div {
            margin-top: 15px;

            h4 {
                width: 95%;

                span {
                    font-weight: normal;
                }

                .tu {
                    background: #e4eef4;
                    color: rgb(44, 116, 224);
                    font-size: .8rem;
                    margin-right: .3rem;
                }

                .wen {
                    background: #f3e4a3;
                    color: rgb(242, 45, 6);
                    font-size: .8rem;
                }

                .date {
                    position: absolute;
                    right: 1.5rem;
                    font-size: .85rem;
                    color: #ccc;
                }
            }

            p {
                display: flex;
                flex-wrap: wrap;

                span {
                    display: flex;
                    margin: .2rem .6rem;
                    color: #707070;
                    font-weight: 400;
                    font-size: 15px;
                }

                .span::after {
                    width: 1rem;
                    height: .7rem;
                    margin-top: .3rem;
                    border-right: .0625rem solid #ccc;
                    content: "|";
                    color: transparent;
                }
            }

            .wenti {
                width: 95%;
                padding: 4px;
                background: #f1efef;
                color: #818181;
                font-size: 14px;
                display: -webkit - box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
}

.active {
    border: 1px solid orangered;
    color: orangered;
}
</style>
<template>
    <div>
        <div class="pingjia">
            <div class="fenlei">
                <div @click="changeIndex(item, index)" :class="active == index ? 'active' : ''"
                    v-for="(item, index) in evaluate.assessment.slice(1,5)" :key="index">
                    <span>
                        {{ item.name }}
                        <!-- ({{ count }}) -->
                    </span>
                </div>
            </div>
            <div class="userpingjia">
                <div v-for="(item, index) in filterlist" :key="index">
                    <h4>
                        {{ item.phone }}
                        <span class="tu">图文</span>
                        <span class="wen">满意</span>
                        <span class="date">{{ item.date }}</span>
                    </h4>
                    <p>
                        <!-- {{ item.evaluate_chi }} -->
                        <span class="span">
                            耐心细致
                        </span>
                        <span class="span">
                            讲解很清楚
                        </span>
                        <span>
                            回复很及时
                        </span>
                    </p>
                    <div class="wenti">
                        问题描述：{{ item.evaluate_en }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const evaluate = ref([])
const route = useRoute()
const active = ref(0)
var filterlist = ref([])
var count = ref([])

evaluate.value = JSON.parse(route.query.item)

onMounted(() => {
    count = computed(() => {
        const items=evaluate.value.assessment
        return evaluate.value.evaluate.filter((item) => item.evaluate_en.includes(items.name)).length
    })
    console.log(count);
})

const changeIndex = (items, index) => {
    active.value = index
    filterlist = computed(() => {
        return evaluate.value.evaluate.filter((item) => item.evaluate_en.includes(items.name))
    })
    count = computed(() => {
        return evaluate.value.evaluate.filter((item) => item.evaluate_en.includes(items.name)).length
    })
    console.log(count);

    // console.log(filterlist.value);
}
</script>